<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>用户中心-个人财务</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/comm.css" />
		<style type="text/css">
			@media (min-height:731px) {
				html {
					height: 100%;
				}
				body {
					height: 100%;
				}
				.box_height {
					height: 100%;
				}
			}
		</style>
	</head>

	<body>
		<div class="container-fluid box_height" style="background-color: #434273;">
			<div class="fakeloader"></div>
			<div class="row hao " style="background-color: #383961;">
				<div class="hao_div">
					<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 animated slideInDown" style="padding: 0;">
						<div class="logo_ck" style="padding-left: 10px;">
							<img class="logo" src="img/logo.png" /><span class="ck"> CK</span>
						</div>
					</div>
					<div class="col-lg-5 col-md-10 col-xs-5 col-sm-5 caid animated slideInDown"><img id="caid" src="img/cai.png" /></div>
					<div class="col-lg-9 col-md-9 caid1 animated slideInDown dhl_dh" style="height: 60px;">
						<ul class="dtlul" style="color: #fff;">
							<li class="shybj">
								<a href="index.html">首页</a>
							</li>
							<li id="dhl">
								<a href="core.html">交易中心</a>
							</li>
							<li id="dhl1">
								<a href="entrust.html" style="color: #d51e87;">委托管理</a>
							</li>

							<li id="dhl2">
								<a href="user.html">用户中心</a>
							</li>
							<li id="dhl3">
								<a href="news.html">信息</a>
							</li>
							<li id="switch" class="switch1"><span class="yuy">简体</span>  <span class="xiab">﹀</span>
								<div class="switch">
									<input id="ft" type="button" value="繁体" onclick="zh_tran('t');" />
									<input id="jt" type="button" value="简体" onclick="zh_tran('s');" />
									<input id="yw" type="button" value="English" />
								</div>
							</li>
							<li id="dhl4">
								<div class="tx_div"><img src="img/txiang.png" /></div>
								<a href="">账号名</a>
							</li>
						</ul>
					</div>
					<div class="heip">
						<div class="text-right">
							<div class="dax"><img style="width: 30px" src="img/xx1.png" /></div>
						</div>
					</div>
					<div class="show_dhl">
						<ul class="dtlu2">
							<li class="shybj">
								<a href="index.html">首&nbsp;&nbsp;&nbsp;页</a>
							</li>
							<li id="dhl" class="shybj">
								<a href="core.html">交易中心</a>
							</li>
							<li id="dhl1" class="shybj">
								<a href="entrust.html">委托管理</a>
							</li>

							<li id="dhl2" class="shybj">
								<a href="user.html">用户中心</a>
							</li>
							<li id="dhl3" class="shybj">
								<a href="news.html">资&nbsp;&nbsp;&nbsp;讯</a>
							</li>
							<li class="shybj"><span id="switch1">简体 <span class="xiab">﹀</span></span>
							</li>
							<li class="shybj" id="dhl4">

								<a href="">账号名</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			
			<div class="container-fluid" style="max-width: 1058px;">
				<div class="row">
					<div class="col-lg-12 col-xs-12 col-md-12 col-sm-12" style="padding: 0;">
						<div style="padding: 12px 0px;background-color: #4c4c7b; padding-bottom: 32px;">
							<div class="sjx voly"></div>

							<div style="color: #fff;">

								<div class="zhj zhj0">
									<div>
										凭证/留言-新增
									</div>
									<div class="zhj_h">
										<div class="item" style="margin-left: 0;">
											<svg class="icon addImg" aria-hidden="true">
												<img class="zhj1" src="img/shangpzh.png" />
												<use xlink:href="#icon-tianjiatupian"></use>
											</svg>
											<input name="url" type="file" class="upload_input" onChange="preview(this)">
											<div class="preview"></div>
											<div class="click" onClick="loadImg(this)"></div>
											<div class="delete" onClick="deleteImg(this)">
												<svg class="icon" aria-hidden="true">
													<use xlink:href="#icon-shanchu4"></use>
												</svg>
											</div>
										</div>
									</div>
								</div>
								<div class="div_tear">
									<textarea class="tear" name="" rows="9" cols="" placeholder="请输入留言"></textarea>
								</div>
								<br />
								<br />
								<div style="padding-left: 52px;">
									<a class="tja" href=""> <button class="btn_yj">提交</button></a>
								</div>

							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
		<!--尾部-->
		<!--<div class="liao">
				<img src="img/liao.png" />
			</div>

			<div class="row text-center hei">
				<div>
					Copyright © 2015-2018 ALL Rights Reserved..粵ICP备16082210号-3
				</div>
			</div>-->
		</div>

		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="js/font.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap-3.3.7/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.11.0.min.js"></script>
		<script src="js/fakeLoader.min.js"></script>
		<script src="test/lib/esl.js"></script>
		<script src="js/svg.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//选择图片
			var loadImg = function(obj) {
				$(obj).parent().find(".upload_input").click();
			}
			//删除
			var deleteImg = function(obj) {
				$(obj).parent().find('input').val('');
				$(obj).parent().find('.preview').html('');
				$(obj).hide();
			}
		</script>
		<script type="text/javascript">
			function preview(file) {
				var prevDiv = $(file).parent().find('.preview');
				if(file.files && file.files[0]) {
					var reader = new FileReader();
					reader.onload = function(evt) {
						prevDiv.html('<img src="' + evt.target.result + '" />');
					}
					reader.readAsDataURL(file.files[0]);
				} else { //IE
					prevDiv.html('<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>');
				}
				$(file).parent().find('.delete').show();
			}
		</script>

		<style type="text/css">
			section {
				width: 1200px;
				margin: 200px auto;
			}
			
			article {
				border: 1px solid #ccc;
				padding: 20px;
			}
			
			.icon {
				width: 2em;
				height: 2em;
				vertical-align: -0.15em;
				fill: currentColor;
				overflow: hidden;
			}
			
			.item {
				float: left;
				position: relative;
				margin: 20px;
			}
			
			.addImg {
				/*background-image: url(img/zhj1.png);*/
				width: 230px;
				height: 190px;
			}
			
			.upload_input {
				display: none !important;
			}
			
			.preview {
				position: absolute;
				width: 230px;
				height: 147px;
				left: 0;
				top: 0;
			}
			
			.click {
				position: absolute;
				width: 230px;
				height: 147px;
				left: 0;
				top: 0;
				z-index: 1;
				cursor: pointer;
			}
			
			.delete {
				position: absolute;
				right: -2rem;
				top: -1rem;
				cursor: pointer;
				display: none;
			}
			
			.preview img {
				width: 100%;
				height: 100%;
			}
			
			.zhj1 {
				position: absolute;
				left: 0px;
			}
			
			.zhj2 {
				position: absolute;
				left: 0;
			}
			
			.tjdvi {
				padding-left: 52px;
				position: relative;
				top: -36px;
			}
		</style>
	</body>

</html>